<!--<template>
  <table class="t3-tb">
    <thead>
      <tr>
        <td class="t3-tb-first">
          <div class="f-box">
            <p class="u">班级</p>
            <p class="m">结果</p>
            <p class="d">周次</p>
          </div>
        </td>
        <td v-for="(n,k) of currNamesData" :key="k" v-html="n"></td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(weekData,k) of currWeekData" :key="k">
        <td>{{weekData[0].period}}</td>
        <td v-for="(d,k2) of weekData" :key="k2">
          <div class="tb-v" v-if="d.class_champion_result_list.length">
            <img v-for="item of d.class_champion_result_list" :key="item.id" :src="item.image" />
          </div>
          <div class="tb-v" v-else>加油</div>
        </td>
      </tr>
    </tbody>
  </table>
</template>-->

<script>
import ajaxApi from '@/modules/ajax-api'
import Timer from '@/modules/corejs/time/timer.js'
import textWidth from '@/modules/corejs/dom/text-width.js'
export default {
  render () {
    let { currNamesData, currWeekData, weekHonorNameAndImageList, periodTypeName } = this
    let tdName = []
    let trWeek = []
    currNamesData.forEach((n, k) => {
      tdName.push(<td key={k} domPropsInnerHTML={n.name}></td>)
      // tdName.push(<td key={k} domPropsInnerHTML={n.name} style={{width: n.width + 'px'}}></td>)
    })
    currWeekData.forEach((weekData, k) => {
      let tdWeek = []
      weekData.forEach((d, k2) => {
        let rList = d.class_champion_result_list
        if (rList.length) {
          // 修改，light 为 false 也不显示
          let elItems = []
          rList.forEach(item => {
            if (item.light === 'true') {
              elItems.push(<img key={item.id} src={item.image} />)
            }
            // elItems.push(<span>{item.ranking}-{item.score}</span>)
          })
          if (elItems.length) {
            tdWeek.push(
              <td key={k2}><div class="tb-v">{elItems}</div></td>
            )
          } else {
            tdWeek.push(
              <td key={k2}>
                <div class="tb-v">加油</div>
              </td>
            )
          }
        } else if (d.isFill) {
          tdWeek.push(
            <td key={k2}>
              <div class="tb-v"></div>
            </td>
          )
        } else {
          tdWeek.push(
            <td key={k2}>
              <div class="tb-v">加油</div>
            </td>
          )
        }
      })

      trWeek.push(
        <tr key={k}>
          <td>{weekData[0].period}</td>
          {tdWeek}
        </tr>
      )
    })

    // 补完整
    let weekTotal = currWeekData.length
    if (weekTotal) {
      for (let i = 0, len = this.maxShowWeekNum - weekTotal; i < len; i++) {
        let tds = []
        currWeekData[0].forEach(() => {
          tds.push(<td><div class="tb-v"></div></td>)
        })
        trWeek.push(
          <tr key={weekTotal + i}>
            <td></td>
            {tds}
          </tr>
        )
      }
    }

    let notesList = []
    weekHonorNameAndImageList.forEach(item => {
      notesList.push(
        <span>
          <img src={item.honor_image}/>
          <span>{item.honor_name}</span>
        </span>
      )
    })

    return (
      <div>
        <table class="t3-tb">
          <thead>
            <tr>
              <td class="t3-tb-first">
                <div class="f-box">
                  <p class="u">班级</p>
                  <p class="m">结果</p>
                  <p class="d">{periodTypeName}次</p>
                </div>
              </td>
              {tdName}
            </tr>
          </thead>
          <tbody>
            {trWeek}
          </tbody >
        </table >
        <div class="notes">
          <span>
            <span>备注：每{periodTypeName}评比一次，不同图案表示不同班级称号：</span>
          </span>
          {notesList}
        </div>
      </div>
    )
  },
  data () {
    return {
      currWeekData: [],
      currNamesData: [],
      weekData: [],
      namesData: [],
      totalPage: 1,
      pageIndex: 0,
      weekHonorNameAndImageList: [],
      maxShowWeekNum: 15, // 最大显示的周数，根据屏幕高度决定

      dataUpdateTime: null, // 记录数据更新时间
      periodType: 'week' // month
    }
  },
  computed: {
    periodTypeName () {
      return this.periodType === 'week' ? '周' : '月'
    }
  },
  created () {
    this.timer = new Timer({
      callBack: () => {
        let page = this.pageIndex
        page++
        if (page >= this.totalPage) page = 0
        this.pageIndex = page
        this.show(page)
      },
      time: 6000
    })
  },
  mounted () {
    this.setMaxShowWeekNum()
  },
  methods: {
    show (page) {
      let currWeekData = this.weekData[page]
      let maxShowWeekNum = this.maxShowWeekNum
      if (currWeekData.length > maxShowWeekNum) {
        currWeekData.splice(0, currWeekData.length - maxShowWeekNum)
      }
      this.currWeekData = currWeekData
      this.currNamesData = this.namesData[page]
    },
    // 周补齐：详情见 ./README.md
    fillWeekData (weekList, data) {
      if (!weekList.length) {
        let fillWeeks = this.fillWeeks
        if (!fillWeeks) {
          data.some(gradeData => {
            gradeData.class_champion_list.some(classData => {
              let weekList = classData.class_champion_period_result_list
              if (weekList.length) {
                fillWeeks = this.fillWeeks = []
                weekList.forEach(d => {
                  fillWeeks.push(d.period)
                })
                return true
              }
            })
            return fillWeeks
          })
        }
        fillWeeks.forEach(n => {
          weekList.push({
            class_champion_result_list: [],
            period: n,
            isFill: true
          })
        })
      }

      return weekList
    },
    // 设置初始宽度，根据班级全名（包括班级、年级）
    setInitTdWidthByClassFullName (gradeName, className) {
      let setFontCss = s => {
        s.fontFamily = 'sans-serif, helvetica'
        s.fontSize = '14px'
      }
      let gradeNameWidth = textWidth(gradeName, setFontCss)
      let classNameWidth = textWidth(className, setFontCss)
      if (gradeNameWidth > classNameWidth) return gradeNameWidth
      return classNameWidth
    },
    //
    setMaxShowWeekNum () {
      this.maxShowWeekNum = ~~((window.innerHeight - 50 - 45 - 60) / 31)
    },
    // true 没有过期，false 过期
    dataIsExpire () {
      let { dataUpdateTime } = this
      let nowDate = new Date()
      return dataUpdateTime && nowDate.getDate() === dataUpdateTime.getDate()
    },
    loadData (periodType) {
      if (this.dataIsExpire()) {
        console.log('数据未过期，不需要加载')
        return
      }
      this.periodType = periodType

      this.timer.stop()
      ajaxApi.getBeautifulStarsOfACampus(periodType).then(({ data }) => {
        this.dataUpdateTime = new Date()
        let pageData = []
        let page = 0
        let pageWidth = 0
        let maxBoxWidth = window.innerWidth - 220 - 77
        data.forEach(gradeData => {
          let gradeName = gradeData.grade_name
          gradeData.class_champion_list.forEach(classData => {
            let className = classData.class_name
            let w = this.setInitTdWidthByClassFullName(gradeName, className) + 4 // 4 为左右边距

            // let weekList = classData.class_champion_period_result_list
            let weekList = classData.class_champion_period_result_list = this.fillWeekData(classData.class_champion_period_result_list, data)
            weekList.forEach((weekData, i) => {
              let list = weekData.class_champion_result_list
              let currW = 41
              let t = list.length
              if (t > 2) {
                currW = t * 18 + 5
              }
              if (currW > w) {
                w = currW
              }
            })
            pageWidth += w
            if (pageWidth > maxBoxWidth) {
              pageWidth = w
              page++
            }

            let pd = pageData[page] || []
            pd.push({ name: `<p>${gradeName}</p><p>${className}</p>`, weekList, width: w })
            pageData[page] = pd
          })
        })
        let totalPage = this.totalPage = page + 1
        // 按页按周拼凑数据，方便表格循环
        let weekData = []
        let namesData = []
        pageData.forEach((d, page) => {
          let pwData = weekData[page] || []
          let names = namesData[page] || []
          d.forEach((d2, w) => {
            let n = d2.name
            names.push({ name: n, width: d2.width })
            d2.weekList.forEach((wd, w) => {
              let wa = pwData[w] || []
              wa.push(wd)
              pwData[w] = wa
            })
          })
          weekData[page] = pwData
          namesData[page] = names
        })
        this.weekData = weekData
        this.namesData = namesData
        this.show(0)
        if (totalPage > 1) this.timer.start()
      })
      ajaxApi.weekHonorNameAndImageList(periodType).then(({ data }) => {
        this.dataUpdateTime = new Date()
        this.weekHonorNameAndImageList = data
      })
    }
  },
  destroyed () {
    this.timer.stop()
  }
}
</script>

<style scoped>
.t3-tb {
  width: 100%;
  border: 1px solid #e2e2e2;
  /* table-layout: fixed; */
  text-align: center;
  color: #666;

  td {
    border: 1px solid #e2e2e2;
    box-sizing: border-box;
    /* vertical-align: middle; */
  }
  thead {
    background: #f2f2f2;
    &>>>p {
      height: 18px;
      /* overflow:hidden;
      white-space: nowrap; */
    }
  }
  /* .th-r2 {
    color: #999;
  } */
  .tb-v {
    height: 18px;
    padding: 6px 2px;
    white-space: nowrap;
    img {
      width: 18px;
      height: 18px;
    }
  }
}
.t3-tb-first {
  width: 76px;

  .f-box {
    position: relative;
    background: url(./diagonal.svg) no-repeat;
    background-size: 100% 100%;
    width: 75px;
  }

  .u {
    width: 72px;
    box-sizing: border-box;
    padding-left: 40px;
    height: 24px;
    text-align: right;
  }
  .m {
    height: 20px;
    text-align: center;
    float: right;
    padding-right: 4px;
  }
  .d {
    height: 20px;
    text-align: left;
  }
}
/* .name {
  text-align: center;
} */
.notes {
  line-height: 2.5;
  text-indent: 6px;
  color: #c88849;

  /* .n-lb {
    line-height: 2.5;
  }
  .n-list {
    line-height: 2.5;
  } */

  &>span:first-child {
    margin-right: -4px;
  }

  img {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin: 0 2px 0 8px;
  }
  span {
    vertical-align: middle;
  }
}
</style>
